<template>
    <!--员工的自己的信息页面-->
  <el-container>
    <el-header style="height: 20%"><el-descriptions class="margin-top" title="个人信息" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          员工姓名
        </template>
        kooriookami
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        18100000000
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          居住地
        </template>
        苏州市
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          员工工号
        </template>
        100125
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          员工负责人
        </template>
        张三
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          负责人联系电话
        </template>
        1328131451
      </el-descriptions-item>
    </el-descriptions>

    </el-header>
    <el-main >
      <div class="traingclass">
      <el-divider content-position="left">参与XXXX班级<i class="el-icon-mobile-phone" ></i></el-divider>
      <div class="trainginplan">
        <el-descriptions class="margin-top" title="XXX计划-已完成" :column="3"  border>
          <el-descriptions-item label="培训是否完成:">否</el-descriptions-item>
          <el-descriptions-item label="培训课程数">12</el-descriptions-item>
          <el-descriptions-item label="完成课程数" :span="2">12</el-descriptions-item>
          <el-descriptions-item label="未完成课程数">0</el-descriptions-item>
          <el-descriptions-item label="培训评分">100</el-descriptions-item>
        </el-descriptions>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title" content-position="center">
            <el-divider>已完成培训课程-几门<i class="el-icon-success"></i></el-divider>
          </template>
          <el-table :data="gridData">
            <el-table-column property="date" label="课程名称" width="175px"></el-table-column>
            <el-table-column property="name" label="考核方式" width="175px"></el-table-column>
            <el-table-column property="name" label="考核地点" width="175px"></el-table-column>
            <el-table-column property="name" label="是否通过考试"width="175px" ></el-table-column>
            <el-table-column property="name" label="考核分数" width="175px"></el-table-column>
            <el-table-column property="name" label="剩余考试次数" width="175px"></el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title" content-position="center">
            <el-divider>未完成培训课程-几门<i class="el-icon-error"></i></el-divider>
          </template>
          <el-table :data="gridData">
            <el-table-column property="date" label="课程名称" width="175px"></el-table-column>
            <el-table-column property="name" label="考核方式" width="175px"></el-table-column>
            <el-table-column property="name" label="考核地点" width="175px"></el-table-column>
            <el-table-column property="name" label="是否通过考试"width="175px" ></el-table-column>
            <el-table-column property="name" label="考核分数" width="175px"></el-table-column>
            <el-table-column property="name" label="剩余考试次数" width="175px"></el-table-column>
          </el-table>
        </el-collapse-item>
        </el-collapse>
        </div>
        <div class="trainginplan">
            <el-descriptions class="margin-top" title="XX计划-未完成" :column="3"  border>
              <el-descriptions-item label="培训是否完成:">否</el-descriptions-item>
              <el-descriptions-item label="培训课程数">12</el-descriptions-item>
              <el-descriptions-item label="完成课程数" :span="2">12</el-descriptions-item>
              <el-descriptions-item label="未完成课程数">0</el-descriptions-item>
              <el-descriptions-item label="培训评分">100</el-descriptions-item>
            </el-descriptions>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item  name="1">
              <template slot="title" content-position="center">
                <el-divider>完成培训课程-几门<i class="el-icon-mobile-phone"></i></el-divider>
              </template>
              <el-table :data="gridData">
                <el-table-column property="date" label="课程名称" width="175px"></el-table-column>
                <el-table-column property="name" label="考核方式" width="175px"></el-table-column>
                <el-table-column property="name" label="考核地点" width="175px"></el-table-column>
                <el-table-column property="name" label="是否通过考试"width="175px" ></el-table-column>
                <el-table-column property="name" label="考核分数" width="175px"></el-table-column>
                <el-table-column property="name" label="剩余考试次数" width="175px"></el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item  name="2">
              <template slot="title" content-position="center">
                <el-divider>未完成培训课程-几门<i class="el-icon-mobile-phone"></i></el-divider>
              </template>
              <el-table :data="gridData">
                <el-table-column property="date" label="课程名称" width="175px"></el-table-column>
                <el-table-column property="name" label="考核方式" width="175px"></el-table-column>
                <el-table-column property="name" label="考核地点" width="175px"></el-table-column>
                <el-table-column property="name" label="是否通过考试"width="175px" ></el-table-column>
                <el-table-column property="name" label="考核分数" width="175px"></el-table-column>
                <el-table-column property="name" label="剩余考试次数" width="175px"></el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>

      <div class="traingclass">
        <el-divider content-position="left">参与XXXX班级<i class="el-icon-mobile-phone" ></i></el-divider>
        <div class="trainginplan">
          <el-descriptions class="margin-top" title="XXX计划-已完成" :column="3"  border>
            <el-descriptions-item label="培训是否完成:">否</el-descriptions-item>
            <el-descriptions-item label="培训课程数">12</el-descriptions-item>
            <el-descriptions-item label="完成课程数" :span="2">12</el-descriptions-item>
            <el-descriptions-item label="未完成课程数">0</el-descriptions-item>
            <el-descriptions-item label="培训评分">100</el-descriptions-item>
          </el-descriptions>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item  name="1">
              <template slot="title" content-position="center">
                <el-divider>完成培训课程-几门<i class="el-icon-mobile-phone"></i></el-divider>
              </template>
              <el-table :data="gridData">
                <el-table-column property="date" label="课程名称" width="175px"></el-table-column>
                <el-table-column property="name" label="考核方式" width="175px"></el-table-column>
                <el-table-column property="name" label="考核地点" width="175px"></el-table-column>
                <el-table-column property="name" label="是否通过考试"width="175px" ></el-table-column>
                <el-table-column property="name" label="考核分数" width="175px"></el-table-column>
                <el-table-column property="name" label="剩余考试次数" width="175px"></el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item  name="2">
              <template slot="title" content-position="center">
                <el-divider>未完成培训课程-几门<i class="el-icon-mobile-phone"></i></el-divider>
              </template>
              <el-table :data="gridData">
                <el-table-column property="date" label="课程名称" width="175px"></el-table-column>
                <el-table-column property="name" label="考核方式" width="175px"></el-table-column>
                <el-table-column property="name" label="考核地点" width="175px"></el-table-column>
                <el-table-column property="name" label="是否通过考试"width="175px" ></el-table-column>
                <el-table-column property="name" label="考核分数" width="175px"></el-table-column>
                <el-table-column property="name" label="剩余考试次数" width="175px"></el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="trainginplan">
          <el-descriptions class="margin-top" title="XX计划-未完成" :column="3"  border>
            <el-descriptions-item label="培训是否完成:">否</el-descriptions-item>
            <el-descriptions-item label="培训课程数">12</el-descriptions-item>
            <el-descriptions-item label="完成课程数" :span="2">12</el-descriptions-item>
            <el-descriptions-item label="未完成课程数">0</el-descriptions-item>
            <el-descriptions-item label="培训评分">100</el-descriptions-item>
          </el-descriptions>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item  name="1">
              <template slot="title" content-position="center">
                <el-divider>完成培训课程-几门<i class="el-icon-mobile-phone"></i></el-divider>
              </template>
              <el-table :data="gridData">
                <el-table-column property="date" label="课程名称" width="175px"></el-table-column>
                <el-table-column property="name" label="考核方式" width="175px"></el-table-column>
                <el-table-column property="name" label="考核地点" width="175px"></el-table-column>
                <el-table-column property="name" label="是否通过考试"width="175px" ></el-table-column>
                <el-table-column property="name" label="考核分数" width="175px"></el-table-column>
                <el-table-column property="name" label="剩余考试次数" width="175px"></el-table-column>
              </el-table>
            </el-collapse-item>
            <el-collapse-item  name="2">
              <template slot="title" content-position="center">
                <el-divider>未完成培训课程-几门<i class="el-icon-mobile-phone"></i></el-divider>
              </template>
              <el-table :data="gridData">
                <el-table-column property="date" label="课程名称" width="175px"></el-table-column>
                <el-table-column property="name" label="考核方式" width="175px"></el-table-column>
                <el-table-column property="name" label="考核地点" width="175px"></el-table-column>
                <el-table-column property="name" label="是否通过考试"width="175px" ></el-table-column>
                <el-table-column property="name" label="考核分数" width="175px"></el-table-column>
                <el-table-column property="name" label="剩余考试次数" width="175px"></el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
    export default {
        name: "EmpOneselfInfo",
      data(){
          return{
            gridData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }],
          }
      }
    }
</script>

<style scoped>

</style>
